<template>
  <div>
    <h1 v-if="!repoName">Loading....</h1>
    <p v-else>
      most star repo is 
      <a href="repoUrl">{{repoName}}</a>
    </p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data(){
    return{
      repoName:'',
      repoUrl:'',
    }
  },
  mounted(){
    axios.get('https://api.github.com/search/repositories?q=r&sort=stars')
    .then(response => {
      console.log(response);
      const {name,html_url} = response.data.items[0];
      this.repoName = name;
      this.repoUrl = html_url;
    })
    .catch(error =>{
      console.log(error);
      alert(error.message);
    })
  }
}
</script>

<style>

</style>
